<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0 auto;
				padding: 0;
			}
			
			a {
				text-decoration: none;
			}
			
			#dakuang {
				height: 100%;
				width: 100%;
			}
			
			body {
				height: 400px;
				font-size: 12px;
				background-color: #FDFBFE;
				font-family: tahoma, arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", 微软雅黑, 宋体, sans-serif;
			}
			
			.tou {
				height: 50px;
				width: 1000px;
				margin-top: 50px;
			}
			
			.logo1 {
				height: 53px;
				width: 313px;
				background-image: url(img/sprite-hash-91639fdc.png);
				background-position: 0px 0px;
				float: left;
			}
			
			.logo2 {
				height: 28px;
				width: 445px;
				background-image: url(img/sprite-hash-91639fdc.png);
				background-position: -317px 0px;
				float: right;
				margin-top: 12.5px;
			}
			
			.zhong {
				width: 1000px;
				height: 400px;
				background-color: black;
				margin-top: 50px;
				background-image: url(img/57b4bd15bcc545b8b967d1df86589b99.jpg);
			}
			
			.textright {
				width: 305px;
				height: 443px;
				float: right;
				padding-top: 40px;
				font-family: Arial, tahoma, sans-serif;
				margin-right: 20px;
			}
			
			.text p {
				font-size: 14px;
				line-height: 16px;
				margin-bottom: 15px;
			}
			
			.tfoot {
				color: gray;
				width: 800px;
				text-align: center;
				margin-top: 180px;
			}
			
			.head1 {
				height: 16px;
				width: 300px;
				font-size: 14px;
			}
			
			.tr-le {
				float: left;
			}
			
			.tr-lf1 {
				float: right;
				color: #E9007E;
				font-size: 13px;
				line-height: 20px;
			}
			
			.tr-lf2 {
				float: right;
			}
			
			.woshifenkai {
				height: 25px;
			}
			
			.dengluming {
				border-radius: 3px;
				border: 1px solid #b2b2b2;
				width: 300px;
				height: 34px;
				outline: none;
				color: gray;
				font-size: 14px;
				text-indent: 1em;
			}
			
			.shuruyanzhengma {
				border-radius: 3px;
				border: 1px solid #b2b2b2;
				width: 176px;
				height: 34px;
				outline: none;
				color: gray;
				font-size: 14px;
				text-indent: 1em;
			}
			
			.huoqu {
				height: 36px;
				width: 114px;
				background-color: #D0D0D0;
				border-radius: 6px;
				float: right;
			}
			
			.huoqu p {
				color: gray;
				text-align: center;
				line-height: 36px;
			}
			
			.ljzc {
				width: 300px;
				height: 42px;
				background-color: #E9007E;
			}
			
			.ljzc p {
				color: white;
				text-align: center;
				line-height: 42px;
				font-size: 16px;
			}
			
			.ljzc:hover {
				background-color: rgba(241, 2, 129, 0.8);
			}
			
			.youxiang {
				float: right;
			}
			
			#duigou1 {
				height: 16px;
				width: 16px;
				background-image: url(img/sprite.png);
				background-position: -24px -21px;
				
				position: absolute;
			}
			
			#duigou2 {
				height: 16px;
				width: 19px;
				background-image: url(img/sprite.png);
				background-position: -24px 0px;
				position: absolute;
				display: none;
			}
			
			.woyejieshou {
				height: 16px;
			}
			
			.woyejieshou p {
				text-indent: 1.8em;
			}
			
			.huoqu:hover {
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div id="dakuang">
			<div class="tou">

				<div class="logo1">
				</div>

				<div class="logo2">

				</div>
			</div>
			<div class="zhong">
				<div class="textright">
					<div class="head1">
						<p class="tr-le">欢迎注册</p>
						<a href="#" class="tr-lf1">直接登录</a>
						<p class="tr-lf2">已注册可</p>
					</div>
					<p class="woshifenkai"></p>
					<input type="text" name="" id="" value="请输入手机号码" class="dengluming" />
					<p class="woshifenkai"></p>
					<input type="text" name="" id="" value="请输入验证码" class="shuruyanzhengma" />
					<div class="huoqu">
						<p>获取验证码</p>
					</div>
					<p class="woshifenkai"></p>
					<input type="text" name="" id="" value="密码由6-20位字母，数字和符号组成" class="dengluming" />
					<p class="woshifenkai"></p>
					<input type="text" name="" id="" value="请再次输入上面的密码" class="dengluming" />
					<p class="woshifenkai"></p>

					<div class="woyejieshou">
						<div id="duigou1" onclick="dianjidakai()">
							<div id="duigou2"></div>
						</div>

						<p>我已阅读并接受
							<a href="#">《唯品会服务条款》</a>与
							<a href="#">《隐私条款》</a>
						</p>
					</div>
					<p class="woshifenkai"></p>

					<div class="ljzc">
						<p>立即注册</p>
					</div>
					<p class="woshifenkai"></p>
					<div class="youxiang">
						<a href="#">通过邮箱注册 > </a>
					</div>

				</div>
			</div>
			<div class="tfoot">
				<p>Copyright 2008-2017 vip.com，All Rights Reserved ICP证：粤 B2-20080329</p>
			</div>
			<script type="text/javascript">
				var n = 1;

				function dianjidakai() {
					n++
					if(n % 2 == 0) {
						document.getElementById("duigou2").style.display = "block"
					} else {
						document.getElementById("duigou2").style.display = "none"
					}
				}
			</script>
	</body>

</html>